'use client'
import React, { useState, useEffect, MouseEvent, useRef } from 'react';
import styles from '../../styles/UserMenu.module.css';
import Image from 'next/image';
import Icon from '../icon/Icon';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useRouter } from 'next/navigation';
// 定义菜单项的类型接口，规范每个菜单项的结构
type MenuItem = {
    label: string;          // 菜单项显示文本
    icon: React.ReactNode;  // 菜单项图标
    onClick?: (e: MouseEvent<HTMLLIElement>) => void;  // 点击事件处理函数（可选）
};

// 定义组件接收的属性接口
interface UserMenuProps {
    onLogout: () => void    // 外部传入的退出登录处理函数
}

/**
 * 用户菜单组件
 * 功能：显示用户头像，点击头像展开下拉菜单，包含个人中心、设置、退出登录等功能
 * @param {UserMenuProps} props - 组件属性，包含退出登录回调函数
 * @returns {JSX.Element} 用户菜单组件
 */
const UserMenu = ({ onLogout }: UserMenuProps) => {
    // 状态管理
    const [isOpen, setIsOpen] = useState(false);          // 控制下拉菜单是否展开
    const [isHovered, setIsHovered] = useState(false);    // 控制头像是否处于 hover 状态
    const [isMobile, setIsMobile] = useState(false);      // 判断是否为移动设备
    const [showLogoutModal, setShowLogoutModal] = useState(false);  // 控制退出登录弹窗是否显示
    const router = useRouter();
    // 创建弹窗容器的引用，用于判断点击是否在弹窗外部
    const modalRef = useRef<HTMLDivElement>(null);

    /**
     * 监听窗口大小变化，判断是否为移动设备
     * 移动设备判定标准：窗口宽度 <= 768px
     */
    useEffect(() => {
        const checkMobile = () => setIsMobile(window.innerWidth <= 768);
        // 初始化时检查一次
        checkMobile();
        // 添加窗口大小变化监听
        window.addEventListener('resize', checkMobile);
        // 组件卸载时移除监听
        return () => window.removeEventListener('resize', checkMobile);
    }, []);

    /**
     * 点击/触摸外部区域关闭下拉菜单
     * 排除菜单容器和退出登录弹窗区域
     */
    useEffect(() => {
        const handleClose = (event: MouseEvent | TouchEvent) => {
            const target = event.target as HTMLElement;
            // 不关闭退出登录弹窗，只处理下拉菜单
            if (!target.closest(`.${styles['user-menu-container']}`) &&
                !target.closest(`.${styles['modal-overlay']}`)) {
                setIsOpen(false);
            }
        };

        // 添加鼠标和触摸事件监听
        document.addEventListener('mousedown', handleClose as EventListener);
        document.addEventListener('touchstart', handleClose as EventListener);

        // 组件卸载时移除监听
        return () => {
            document.removeEventListener('mousedown', handleClose as EventListener);
            document.removeEventListener('touchstart', handleClose as EventListener);
        };
    }, []);

    /**
     * 点击/触摸弹窗外部关闭退出登录弹窗
     * 仅在弹窗显示时生效
     */
    useEffect(() => {
        // 只有当弹窗显示时才添加监听器
        if (!showLogoutModal) return;

        const handleClickOutside = (event: MouseEvent | TouchEvent) => {
            const target = event.target as HTMLElement;
            // 检查点击是否发生在弹窗容器外部
            if (modalRef.current && !modalRef.current.contains(target)) {
                setShowLogoutModal(false);
            }
        };

        // 添加鼠标和触摸事件监听
        document.addEventListener('mousedown', handleClickOutside as EventListener);
        document.addEventListener('touchstart', handleClickOutside as EventListener);

        // 组件卸载或弹窗关闭时移除监听
        return () => {
            document.removeEventListener('mousedown', handleClickOutside as EventListener);
            document.removeEventListener('touchstart', handleClickOutside as EventListener);
        };
    }, [showLogoutModal]); // 依赖弹窗显示状态，状态变化时重新执行

    /**
     * 确认退出登录处理函数
     * 关闭弹窗和下拉菜单，调用外部传入的退出登录函数，显示提示信息
     */
    const confirmLogout = () => {
        setShowLogoutModal(false);
        setIsOpen(false);
        onLogout();
        toast.info('已退出登录', {
            position: "top-center",
            autoClose: 1500,
            theme: 'colored',
        });
    };

    /**
     * 取消退出登录处理函数
     * 仅关闭退出登录弹窗
     */
    const cancelLogout = () => {
        setShowLogoutModal(false);
    };

    /**
     * 处理退出登录菜单项点击
     * 阻止默认行为，显示退出登录确认弹窗
     * @param {MouseEvent<HTMLLIElement>} e - 鼠标事件对象
     */
    const handleLogoutClick = (e: MouseEvent<HTMLLIElement>) => {
        e.preventDefault();
        setShowLogoutModal(true);
    };

    /**
     * 处理收藏夹点击事件
     * 关闭下拉菜单并跳转到个人中心的收藏夹板块
     */
    const handleFavoritesClick = () => {
        setIsOpen(false);
        // 跳转到个人中心并指定显示收藏夹标签页
        router.push('/profile?tab=favorites');
    };

    // 下拉菜单数据
    const menuItems: MenuItem[] = [
        {
            label: '个人中心',
            icon: <Icon icon={['fas', 'user-alt']} className={'user-menu-collect'}/>,
            onClick: () => {
                setIsOpen(false);
                // 导航到个人中心页面
                router.push('/profile?tab=profile')
            }
        },
        {
            label: '收藏夹',
            icon: <Icon icon={['fas', 'envelope-open']} className={'user-menu-collect'}/>,
            onClick: handleFavoritesClick  // 添加收藏夹点击事件
        },
        {
            label: '下载手机应用',
            icon: <Icon icon={['fas', 'mobile-android']} className={'user-menu-collect'}/>
        },
        {
            label: '设置',
            icon: <Icon icon={['fas', 'user-cog']} className={'user-menu-collect'}/>
        },
        {
            label: '退出登录',
            icon: <Icon icon={['fas', 'sign-out-alt']} className={'user-menu-collect'}/>,
            onClick: handleLogoutClick  // 绑定退出登录点击事件
        }
    ];

    return (
        <div className={styles['user-menu-container']}>
            {/* 头像组件 - 点击切换菜单状态，hover时有特殊效果 */}
            <div
                onClick={() => setIsOpen(!isOpen)}
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
                className={`${styles['avatar-wrapper']} ${isHovered || isOpen ? styles['avatar-hover'] : ''}`}
            >
                <Image
                    src="/images/user.png"
                    alt="用户头像"
                    width={36}
                    height={36}
                    className={styles.userIcon}
                />
                <div className={styles['avatar-glow']}/>
            </div>

            {/* 下拉菜单 - 根据设备类型显示不同样式，isOpen为true时显示 */}
            {isOpen && (
                <div className={isMobile ? styles['dropdown-menu-mobile'] : styles['dropdown-menu']}>
                    <ul>
                        {menuItems.map((item, index) => (
                            <li
                                key={index}
                                // 有自定义点击事件则使用自定义事件，否则点击关闭菜单
                                onClick={item.onClick || (() => setIsOpen(false))}
                                // 退出登录项添加特殊样式
                                className={item.label === '退出登录' ? styles['logout-item'] : ''}
                            >
                                <span>{item.icon}</span>
                                <span>{item.label}</span>
                            </li>
                        ))}
                    </ul>
                </div>
            )}

            {/* 自定义退出登录弹窗 - showLogoutModal为true时显示 */}
            {showLogoutModal && (
                <div className={styles['modal-overlay']}>
                    {/* 将ref绑定到弹窗容器，用于判断外部点击 */}
                    <div ref={modalRef} className={styles['modal-container']}>
                        <div className={styles['modal-header']}>
                            <Icon icon={['fas', 'sign-out-alt']} className={styles['modal-icon']} />
                            <h3>退出登录</h3>
                        </div>
                        <div className={styles['modal-body']}>
                            <p>确定要退出当前登录吗？您需要重新登录才能继续使用所有功能。</p>
                        </div>
                        <div className={styles['modal-footer']}>
                            <button
                                type={'button'}
                                className={styles['modal-btn'] + ' ' + styles['cancel-btn']}
                                onClick={cancelLogout}
                            >
                                取消
                            </button>
                            <button
                                type={'button'}
                                className={styles['modal-btn'] + ' ' + styles['confirm-btn']}
                                onClick={confirmLogout}
                            >
                                确认退出
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default UserMenu;
